<template>
  <div>
    <el-button style="margin-top: 20px;padding-left: 20px;" type="primary">增加停车计费规则</el-button>

    <el-table
      v-loading="loading"
      :data="data"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="180"
      >
        <template #default="{$index}">
          {{ $index + 1 + 10 *(page -1) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="ruleNumber"
        label="计费规则编号"
        width="180"
      />
      <el-table-column
        prop="ruleName"
        label="计费规则名称"
      />
      <el-table-column
        prop="freeDuration"
        label="免费时长（分钟）"
      />
      <el-table-column
        prop="chargeCeiling"
        label="收费上限（元）"
      />
      <el-table-column
        prop="chargeType"
        label="计费方式"
      />
      <el-table-column
        prop="ruleNameView"
        label="计费规则"
      />
      <el-table-column
        prop="demoFlag"
        label="操作"
      >
        <el-button type="text" size="small" @click="onSub('edit')">编辑</el-button>
        <el-button type="text" size="small" @click="onSub('del')">删除</el-button>
      </el-table-column>
    </el-table>
    <div class="block" style="float:right">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20,50,100]"
        :page-size="10"
        layout="total,prev,pager,next,sizes"
        :total="total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />

    </div>
  </div>
</template>

<script>
import { getBillingAPI } from '@/api/billingRule'
export default {
  data() {
    return {
      data: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    async onLoad() {
      this.loading = true
      const { data } = await getBillingAPI({ page: this.page, pageSize: this.pageSize })
      this.loading = false
      this.data = data.rows
      this.total = data.total
    },
    onCurrentChange(page) {
      this.page = page
      this.onLoad()
    },
    onSizeChange(page) {
      this.pageSize = page
      this.onLoad()
      this.page = 1
    }
  }
}
</script>

<style>

</style>
